<template>
	<div class="view_record">
		<div class="title"><span class="t_block"></span>观看历史</div>

		<van-list
			class="list"
			v-model:loading="state.loading"
			:finished="state.finished"
			finished-text="没有更多了"
			@load="getVideoBrowseRecord"
		>
			<div style="display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap">
				<template v-for="item of state.videoRecordList" :key="item.id">
					<div class="list_item">
						<img v-lazy="imgUrl + (item.video.imgs || item.user_img)" />
						<!-- 用户信息 -->
						<div class="user_info">
							<van-image
								class="avatar"
								round
								width="27px"
								height="27px"
								fit="cover"
								:src="item.like_user.head_img_url"
							/>
							<span>{{ item.likeUsername }}</span>
						</div>
						<!-- 播放按钮 -->
						<img class="vider_playicon" src="@/assets/img/play.png" @click="playVideo(item)" />
					</div>
				</template>
			</div>
		</van-list>

		<van-popup v-model:show="show" style="background: none" @close="popupClose">
			<div class="popup_content">
				<video ref="videoRef" controls playsinline="true" :src="state.videoSrc"></video>
			</div>
		</van-popup>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
import { useMainStore } from '@/store/index';
import { videoBrowseRecord } from '@/api/my';

const imgUrl = import.meta.env.VITE_IMG_URL;
const mainStore = useMainStore();
const state = reactive<any>({
	pageInfo: {
		pageIndex: 1,
		pageSize: 10,
		user_id: mainStore.user_id
	},
	videoRecordList: [],
	loading: false,
	finished: false,
	videoSrc: ''
});

let show = ref(false);

const playVideo = (item: any) => {
	console.log(item);
	state.videoSrc = item.video.video_url;
	show.value = true;
};

const videoRef = ref<HTMLVideoElement | null>(null);
// 弹窗关闭 暂停视频
const popupClose = () => {
	if (!videoRef.value?.paused) {
		videoRef.value?.pause();
	}
};

// 获取观看记录
const getVideoBrowseRecord = async () => {
	const res = await videoBrowseRecord(state.pageInfo);
	let { dataList } = res.data;
	if (dataList.length) {
		state.pageInfo.pageIndex++;
		state.videoRecordList = [...state.videoRecordList, ...dataList];
		state.loading = false;
	} else {
		state.finished = true;
	}
};
</script>

<style lang="scss" scoped>
.view_record {
	padding: 15px;
	.title {
		font-size: 15px;
		font-weight: bold;
	}
	.list {
		// @include flx-justify-between;
		margin-top: 20px;
		flex-wrap: wrap;
		.list_item {
			position: relative;
			width: 48%;
			height: 210px;
			margin-bottom: 15px;
			border-radius: 10px;
			overflow: hidden;
			.user_info {
				@include flx-center;
				position: absolute;
				left: 10px;
				bottom: 10px;
				color: white;
				font-size: 12px;
				font-weight: bold;
				span {
					margin-left: 6px;
				}
			}
			.vider_playicon {
				position: absolute;
				top: 40%;
				left: 50%;
				transform: translate(-50%);
				width: 36px;
				height: 36px;
			}
			img {
				width: 100%;
				height: 100%;
				object-fit: cover;
			}
		}
	}
	.popup_content {
		width: 100vw;
		//height: 80vh;
		overflow: hidden;
		video {
			width: 100%;
			height: 100%;
			object-fit: cover;
			//border-radius: 20px;
		}
	}
}
</style>
